<template>
    <div class="container">
    <!-- <h1>团课预约设置</h1> -->
      <el-form :label-width="120"  class="form-res" >
         <el-form-item label="预约开始时间">
          <el-radio-group v-model="form.appointmentStartMode">
            <el-radio value="0">
                <span>不会限制会员可预约的天数!</span>
            </el-radio>
          </el-radio-group>
        </el-form-item>
         <el-form-item >
          <el-radio-group v-model="form.appointmentStartMode">
            <el-radio value="1">
                <span>最多可以提前</span>
                <el-input v-model="form.startDay" size="small"/>
                <span>天内的课程</span>
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 截止时间 -->
         <el-form-item label="预约截止时间">
          <el-radio-group v-model="form.appointmentDeadlineMode">
            <el-radio value="0">
                <span>任意时间,均可预约</span>
            </el-radio>
          </el-radio-group>
        </el-form-item>
         <el-form-item >
          <el-radio-group v-model="form.appointmentDeadlineMode">
            <el-radio value="1">
                <span>预约截止时间:上课前</span>
                <el-input v-model="form.endHour" size="small"/>
                <span>小时</span>
            </el-radio>
          </el-radio-group>
        </el-form-item>
         <el-form-item >
          <el-radio-group v-model="form.appointmentDeadlineMode">
            <el-radio value="2">
                <span>预约截止时间:上课前</span>
                <el-input v-model="form.endDay" size="small"/>
                <span>天的</span>
                <el-time-picker v-model="form.endTimeStr" size="small" style="width: 100px;"/>
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 取消预约时间 -->
         <el-form-item label="取消预约时间">
          <el-radio-group v-model="form.appointmentCancelMode">
            <el-radio value="0">
                <span>在上课前任意时间，均可取消预约</span>
            </el-radio>
          </el-radio-group>
        </el-form-item>
         <el-form-item >
          <el-radio-group v-model="form.appointmentCancelMode">
            <el-radio value="1">
                <span>取消预约截止时间:上课前</span>
                <el-input v-model="form.cancelHour" size="small"/>
                <span>小时</span>
            </el-radio>
          </el-radio-group>
        </el-form-item>
         <el-form-item >
          <el-radio-group v-model="form.appointmentCancelMode">
            <el-radio value="2">
                <span>取消预约截止时间:上课前</span>
                <el-input v-model="form.cancelDay" size="small"/>
                <span>天的</span>
                <el-time-picker v-model="form.cancelTimeStr" size="small" style="width: 100px;" />
            </el-radio>
          </el-radio-group>
        </el-form-item>
           <el-form-item>
              <el-button type="primary" @click="save">保存</el-button>
            </el-form-item>
      </el-form>  
     
 

    </div>
</template>

<script setup>
import {ref,reactive} from  'vue'
const  form = reactive({
    appointmentStartMode:'0', //预约开始模式
    startDay:'1',//提前多天预约
    appointmentDeadlineMode:'0',//截止
    endHour:'2',//截止时间
    endDay:'1',//截止day
    endTimeStr:'',
    appointmentCancelMode:'0',//取消模式
    cancelHour:'2',
    cancelDay:'1',
    cancelTimeStr:''

})

const value1 = ref(new Date(2024, 9, 10, 18, 30))
const save=()=>{
    console.log('--save 保存预约信息-')
     ElMessageBox.confirm(
        // `<h3>你确定要修改全局设置吗?</h3> <h5 style="color:#797979;">注意:此设置将影响所有课程预约</h5>`,
        `<h3>你确定要修改全局设置吗?</h3> <h5 style="color:#797979;">注意:此设置将影响所有课程预约</h5>`,
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
             dangerouslyUseHTMLString: true,
             center:true
        }
    )
        .then(() => {
            //todo调用后端接口 修改全局设置

            ElMessage({
                type: 'success',
                message: '预约设置成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消预约设置',
            })
        })
}
</script >
<style lang="less" scoped>
.form-res{
    width: 80%;
    margin: 0 20%;
}
  .form-res .el-input{
    width: 80px;
  }

</style>